<template>
	<div class="overflow-scroll style11">
		<div class="head">
			<div class="item" v-for="item in moneyTypeList" :key="item.id">
				<div class="title" :style="{ backgroundColor: item.color }">
					{{ item.title }}
				</div>
				<div class="money">
          <count-to  :start-value="0" :end-value="item.money" :decimals="2" class="text-30px  dark:text-dark" />
        </div>
			</div>
		</div>
		<n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
			<div class="flex-col h-full">
				<n-space class="pb-12px" justify="space-between">
					<n-space>
						<n-input
							v-model:value="operator_id"
							type="text"
							placeholder="ID"
							clearable
						/>
						<n-date-picker
							v-model:formatted-value="year_month"
							value-format="yyyy-MM"
							type="month"
							clearable
						/>
						<n-button type="primary" @click="handleAddTable"> 查询 </n-button>
					</n-space>
					<n-space align="center" :size="18">
						<n-button size="small" type="primary" @click="getTableData()">
							<icon-mdi-refresh
								class="mr-4px text-16px"
								:class="{ 'animate-spin': loading }"
							/>
							刷新表格
						</n-button>
						<column-setting v-model:columns="columns" />
					</n-space>
				</n-space>
				<n-data-table
					remote
					:columns="columns"
					:data="tableData"
					:loading="loading"
					:pagination="pagination"
					flex-height
					class="flex-1-hidden"
				/>
			</div>
		</n-card>
	</div>
</template>

<script setup lang="tsx">
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import { NButton, NPopconfirm, NSpace, NTag } from "naive-ui";
import type { DataTableColumns, PaginationProps } from "naive-ui";
import { selectCaiwuList, selectCaiwuData } from "@/service";
import { useBoolean, useLoading } from "@/hooks";
import ColumnSetting from "./components/column-setting.vue";
import { useRouter } from "vue-router";

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();
const router = useRouter();

const columns: Ref<DataTableColumns<any>> = ref([
	{
		key: "operator_id",
		title: "ID",
		align: "center",
	},
	{
		key: "username",
		title: "用户名",
		align: "center",
	},
	{
		key: "before_income",
		title: "分成前前收益",
		align: "center",
	},
	{
		key: "income",
		title: "收益",
		align: "center",
	},
	{
		key: "year_month",
		title: "月份",
		align: "center",
	},
	{
		key: "actions",
		title: "操作",
		align: "center",
		render: (row: any) => {
			return (
				<NSpace justify={"center"}>
					<NButton size={"small"} onClick={() => handleEditTable(row)}>
						数据详情
					</NButton>
				</NSpace>
			);
		},
	},
]) as Ref<any>;

let operator_id: any = ref(null);
let year_month: any = ref(null);
// 查询
function handleAddTable() {
	// console.log(year_month);
  pagination.page = 1
	getTableData();
}
// 详情
function handleEditTable(row: any) {
	console.log(row);
	router.push({
		path: "/financial/details",
		query: {
			operator_id: row.operator_id,
			year_month: row.year_month,
		},
	});
}
const tableData = ref<any>([]);
async function getTableData() {
	startLoading();
	let params = {
		page: pagination.page,
		page_size: pagination.pageSize,
		operator_id: operator_id.value,
		year_month: year_month.value,
	};
	const { data } = await selectCaiwuList(params);
	// console.log(data);
	if (data) {
		tableData.value = data.item;
		pagination.itemCount = data.total;
		endLoading();
	}
}

// 分页
const pagination: PaginationProps = reactive({
	page: 1,
	pageSize: 10,
	showSizePicker: true,
	pageSizes: [10, 15, 20, 25, 30],
	onChange: (page: number) => {
		pagination.page = page;
		getTableData();
	},
	onUpdatePageSize: (pageSize: number) => {
		pagination.pageSize = pageSize;
		pagination.page = 1;
		getTableData();
	},
});

let moneyTypeList = ref([
	{
		id: "tixian",
		color: "#2f4056",
		title: "提现金额",
		money: 0.0,
	},
	{
		id: "account",
		color: "#149bff",
		title: "账户金额",
		money: 0.0,
	},
	{
		id: "totalIncome",
		color: "#998831",
		title: "总收益",
		money: 0.0,
	},
]);
async function getSelectCaiwuData() {
	let { data } = await selectCaiwuData();
	if (data) {
		moneyTypeList.value = [
			{
				id: "tixian",
				color: "#2f4056",
				title: "提现金额",
				money: data.totalIncome - data.account,
			},
			{
				id: "account",
				color: "#149bff",
				title: "账户金额",
				money: data.account,
			},
			{
				id: "totalIncome",
				color: "#998831",
				title: "总收益",
				money: data.totalIncome,
			},
		];
	}
}

function init() {
	getTableData();
	getSelectCaiwuData();
}

// 初始化
init();
</script>

<style scoped>
.style11::-webkit-scrollbar {
	display: none;
}

.head {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.item {
	min-width: 200px;
	margin-right: 30px;
	transition: all 0.3s;
}

.item:hover {
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
	transform: scale(1.05);
}

.title {
	padding: 10px 0;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

.money {
	border: 1px solid #ccc;
	border-top: none;
	padding: 20px 0;
	text-align: center;
	background-color: #fff;
	font-weight: bold;
	color: #333;
}
</style>
